<template>
  <div class="home yoyo-container mx-auto min-h-screen" style="min-height: 100vh">
    <navBar :title="$t('products.listNavTitle')" />
    <div class="px-4 mt-4">
      <property-grid :items="properties" :showLiked="true" @updateFavorite="handleUpdateFavorite" />
      <van-empty v-if="!properties.length" :description="$t('common.noData')" />
    </div>
  </div>
</template>

<script>
import PropertyGrid from "@/components/home/PropertyGrid.vue"
import { getProductList } from "@/apis/shop"

export default {
  components: {
    "property-grid": PropertyGrid,
  },
  data() {
    return {
      // Local static data as per requirement
      properties: [],
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async getPropertiesList(id) {
      try {
        const params = {
          pageNo: 1,
          pageSize: 100,
          categoryId: id,
        }
        const res = await getProductList(params)
        this.properties = res.data.list || []
      } catch (error) {
        console.log("object :>> ", error)
      }
    },
    handleUpdateFavorite(id, favorite) {
      this.getPropertiesList(this.$route.query.id)
    },
  },
  created() {
    this.getPropertiesList(this.$route.query.id)
    console.log("this.$route.params :>> ", this.$route)
  },
}
</script>

<style scoped>
.home {
  /* simple spacing for home */
  padding-bottom: 60px;
}
</style>
